<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>比价搜索页面</title>
    <!-- 引入页面图标 -->
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <!-- 引入bootstrap样式文件 -->
    <link rel="stylesheet" href="../lib/bootstrap/bootstrap.css">
    <!-- 引入初始化样式 -->
    <link rel="stylesheet" href="../css/base.css">
    <!-- 引入iconfont图标库 -->
    <link rel="stylesheet" href="../fonts/font-awesome-4.7.0/css/font-awesome.css">
    <!-- 引入比较搜索页面css样式 -->
    <link rel="stylesheet" href="../css/category.css">

</head>

<body>
    <!-- header 头部 -->
    <header>
        <h1>
            <a href="../index.html">
                <img src="../images/header_logo.png" alt="">
            </a>
        </h1>
        <a href="javascript:void(0);">
            <img src="../images/header_app.png" alt="">
        </a>
    </header>

    <!-- 搜索 -->
    <section class="mmb_search">
        <form action="#">
            <i class="fa fa-search" aria-hidden="true"></i>
            <input class="search_ipt" type="search" placeholder="请输入你想比价的商品">
            <input class="search_submit" type="button" value="搜索">
        </form>
    </section>

    <!-- 商品分类列表-->
    <div id="categories_prod_list">
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <!-- 分类列表 -->
        </div>
    </div>

    <!-- 尾部部分 -->
    <footer id="footer">
        <div class="row">
            <div class="col-xs-4">
                <a href="">登录</a>
            </div>
            <div class="col-xs-4">
                <a href="">注册</a>
            </div>
            <div class="col-xs-4">
                <a href="#">
                    <i class="fa fa-arrow-up" aria-hidden="true"></i>
                    返回顶部
                </a>
            </div>
        </div>
        <p>
            <a href="">手机app下载 </a>
            <a href="">慢慢买手机版 </a> -- 掌上比价平台</p>
        <p>m.manmanbuy.com </p>
    </footer>

</body>

</html>

<!-- 分类标题art-template模板 -->
<script type="text/template" id="categoriesTmp_title">
    {{each result value index}}
     <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="heading{{index}}">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-titleid="{{value.titleId}}" data-parent="#accordion" href="#collapse{{index}} " aria-expanded="true" aria-controls="collapse{{index}}">
                    {{value.title}}
                </a>
                <i class="fa fa-angle-down" aria-hidden="true"></i>
            </h4>
        </div>
         <div id="collapse{{index}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{index}}">
            <div class="panel-body">
                <div class="row">
                </div>
            </div>
        </div>
    </div>
    {{/each}}
</script>

<!--分类列表art-template模板-->
<script id="categoryListTmp" type="text/template">
    {{each result value index}}
    <div class="col-xs-4"> 
        <a href="productlist.html?categoryid={{value.categoryId}}&category={{value.category}}">{{value.category}}</a>
    </div>
    {{/each}}
</script>

<!-- 引入jquery文件 -->
<script src="../lib/jquery/jquery-1.12.2.js"></script>
<!-- 引入bootstrap文件 -->
<script src="../lib/bootstrap/bootstrap.js"></script>
<!-- 引入zepto文件 -->
<!-- <script src="../lib/zepto/dist/zepto.js"></script> -->
<!-- 引入art-template -->
<script src="../lib/art-template/template-web.js"></script>

<!-- 引入比价分类js文件 -->
<script src="../js/category.js"></script>